<template>
  <div class="user-view">
    <!-- 用户信息区域 -->
    <div class="user-info">
      <div class="avatar">
        <img :src="userInfo.avatar" alt="用户头像" />
      </div>
      <div class="user-name">{{ userInfo.name }}</div>
    </div>

    <!-- 功能按钮区域 -->
    <div class="function-buttons">
      <div class="button-item" @click="handleButtonClick('历史记录')">
        <div class="button-icon">
          <van-icon name="clock-o" size="20px" />
        </div>
        <div class="button-text">历史记录</div>
      </div>
      <div class="button-item" @click="handleButtonClick('我的收藏')">
        <div class="button-icon">
          <van-icon name="star-o" size="20px" />
        </div>
        <div class="button-text">我的收藏</div>
      </div>
      <div class="button-item" @click="handleButtonClick('我的点赞')">
        <div class="button-icon">
          <van-icon name="like-o" size="20px" />
        </div>
        <div class="button-text">我的点赞</div>
      </div>
    </div>

    <!-- 功能列表区域 -->
    <div class="function-list">
      <div class="list-item" @click="handleItemClick('推荐分享')">
        <span class="item-text">推荐分享</span>
        <van-icon name="arrow-right" size="16px" color="#999" />
      </div>
      <div class="list-item" @click="handleItemClick('意见反馈')">
        <span class="item-text">意见反馈</span>
        <van-icon name="arrow-right" size="16px" color="#999" />
      </div>
      <div class="list-item" @click="handleItemClick('关于我们')">
        <span class="item-text">关于我们</span>
        <van-icon name="arrow-right" size="16px" color="#999" />
      </div>
      <div class="list-item" @click="handleItemClick('退出登录')">
        <span class="item-text">退出登录</span>
        <van-icon name="arrow-right" size="16px" color="#999" />
      </div>
    </div>

    <!-- 返回顶部按钮 -->
    <van-back-top right="15vw" bottom="10vh" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getCurrentUserAPI, logoutAPI } from '@/apis/user'
import { removeStorageToken } from '@/utils/storage'
import router from '@/router'
import { showFailToast, showSuccessToast } from 'vant'

/**
 * 个人中心视图组件
 * 展示用户信息和功能选项
 */

// 用户数据相关的响应式数据
const userInfo = ref<{
  name: string
  avatar: string
}>({
  name: 'chenjing',
  avatar: 'http://teachoss.itheima.net/heimaQuestionMiniapp/官方默认头像%402x.png',
})

const loading = ref(false)

/**
 * 获取用户信息函数
 */
const fetchUserInfo = async () => {
  try {
    loading.value = true
    const res = await getCurrentUserAPI()
    if (res.code === 10000 && res.data) {
      userInfo.value = {
        name: res.data.name || res.data.username,
        avatar: res.data.avatar,
      }
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    showSuccessToast('获取用户信息失败')
  } finally {
    loading.value = false
  }
}

/**
 * 处理退出登录函数
 */
const handleLogout = async () => {
  try {
    await logoutAPI()
    // 清除本地存储的token
    removeStorageToken()
    // 跳转到登录页面
    router.push('/login')
    showSuccessToast('退出登录成功')
  } catch (error) {
    console.error('退出登录失败:', error)
    showFailToast('退出登录失败')
  }
}

/**
 * 处理按钮点击事件
 * @param type 按钮类型
 */
const handleButtonClick = (type: string) => {
  // 根据按钮类型跳转到不同页面
  switch (type) {
    case '历史记录':
      // 可以添加历史记录页面的路由跳转
      console.log('跳转到历史记录页面')
      break
    case '我的收藏':
      router.push('/collect')
      break
    case '我的点赞':
      router.push('/like')
      break
  }
}

/**
 * 处理列表项点击事件
 * @param item 列表项名称
 */
const handleItemClick = (item: string) => {
  // 根据列表项名称执行不同操作
  switch (item) {
    case '推荐分享':
      console.log('执行推荐分享操作')
      break
    case '意见反馈':
      console.log('跳转到意见反馈页面')
      break
    case '关于我们':
      console.log('跳转到关于我们页面')
      break
    case '退出登录':
      handleLogout()
      break
  }
}

// 组件挂载时获取用户信息
onMounted(() => {
  fetchUserInfo()
})
</script>

<style scoped lang="scss">
.user-view {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 60px; // 为底部标签栏留出空间

  .user-info {
    background-color: #fff;
    padding: 30px 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;

    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      margin-bottom: 10px;
      background-color: #fff;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .user-name {
      font-size: 18px;
      font-weight: 500;
      color: #333;
      margin-left: 16px;
    }
  }

  .function-buttons {
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
    margin-bottom: 10px;

    .button-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;

      .button-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #f0f8ff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
        color: #1989fa;
      }

      .button-text {
        font-size: 14px;
        color: #666;
      }
    }
  }

  .function-list {
    background-color: #fff;

    .list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      border-bottom: 1px solid #f0f0f0;
      cursor: pointer;
      transition: background-color 0.2s;

      &:last-child {
        border-bottom: none;
      }

      &:active {
        background-color: #f5f5f5;
      }

      .item-text {
        font-size: 16px;
        color: #333;
      }
    }
  }

  // 覆盖 Vant BackTop 组件样式
  :deep(.van-back-top) {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #1989fa;
    transition: all 0.3s;

    &:active {
      transform: scale(0.9);
      background-color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
